<template>
  <div class="update vH  flex-column">
    <el-row>
      <mei-form
        class=""
        v-loading="page.loading"
        ref="form"
        :model="form"
        size="medium"
        :rules="rules"
      >
        <el-form-item
          v-for="(col, index) in page.cols"
          :key="index"
          :label="col.SYS_ASSET_A1_50"
          :prop="col.SYS_ASSET_A1_160"
        >
          <el-input
            v-if="!col.SYS_ASSET_A1_60 && col.SYS_ASSET_A1_170 != 'Date'"
            v-nulltext
            v-model="form[col.SYS_ASSET_A1_160]"
            clearable
            v-debounce
            @input="onInput"
          ></el-input>
          <el-date-picker
            v-if="!col.SYS_ASSET_A1_60 && col.SYS_ASSET_A1_170 == 'Date'"
            v-model="form[col.SYS_ASSET_A1_160]"
            align="right"
            type="date"
            v-nulltext
            class="vWimp"
            clearable
            v-debounce
            @input="onInput"
          >
          </el-date-picker>
          <assetA1Ddl
            v-else-if="col.SYS_ASSET_A1_60"
            v-model="form[col.SYS_ASSET_A1_160]"
            :sysAssetA1="col"
            clearable
            @onChange="
              (...ags) => {
                onInput(...ags, col.SYS_ASSET_A1_160);
              }
            "
          ></assetA1Ddl>
        </el-form-item>
      </mei-form>
    </el-row>
    <el-row style="min-height:300px" class="main">
      <el-table
        ref="table"
        v-loading="page.loading"
        border
        :data="data"
        row-key="ASSET_A1_AUTOID"
        class="poA"
        height="100%"
        highlight-current-row
      >
        <!-- <el-table-column v-if="showselect" type="selection" width="40">
        </el-table-column> -->
        <el-table-column type="index" width="40"> </el-table-column>
        <el-table-column
          prop="ASSET_A1_30"
          label="资产编号"
          width="130"
        ></el-table-column>
        <el-table-column
          v-for="col in page.cols"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
        >
          <template slot-scope="scope">
            <span v-if="page.showval">
              {{ scope.row[col.prop] }}
              <el-divider direction="vertical"></el-divider>
            </span>
            {{ form[col.prop] }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="foot tree_top_border">
      <el-switch
        v-model="page.showval"
        active-text="显示原值"
        style="margin-right:10px"
      >
      </el-switch>
      <el-button size="small" icon="el-icon-close" @click="onClose">
        关闭
      </el-button>
      <el-button
        v-loading="page.loading"
        type="primary"
        size="small"
        icon="el-icon-check"
        @click="onSave"
      >
        保存
      </el-button>
    </el-row>
  </div>
</template>

<script>
import { AssetA1 } from "@/api";
import assetA1Ddl from "../assetA1Ddl.vue";
import { requiredfields } from "../../assetA1Rules";
export default {
  data() {
    return {
      //页面控制
      page: {
        loading: false,
        cols: [], //{prop,label}
        showval: true
      },
      form: {},
      //rules: {}, //验证
      copyform: {},
      formrow: []
    };
  },
  inject: ["AssetA1", "thisdialog"],
  //外部属性
  props: {
    //选择的数据
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  //内部方法
  methods: {
    initPage() {
      //   console.log(this.form);
    },
    addItem(sysa1item) {
      this.page.loading = true;
      if (sysa1item.SYS_ASSET_A1_160 == "ASSET_A1_30") return;
      //新增列表
      this.page.cols.push({
        prop:
          sysa1item.SYS_ASSET_A1_60 == ""
            ? sysa1item.SYS_ASSET_A1_160
            : "str" + sysa1item.SYS_ASSET_A1_160,
        label: sysa1item.SYS_ASSET_A1_50,
        ...sysa1item
      });
      this.page.loading = false;
    },
    //删除项
    removeItem(sysa1item) {
      //列表
      let index = this.page.cols.findIndex(item => {
        return item.label == sysa1item.SYS_ASSET_A1_50;
      });
      this.page.cols.splice(index, 1);
    },
    //值改变
    onInput(val, text, prop) {
      if (text) {
        //深层无法绘制
        let copyform = { ...this.form };
        copyform["str" + prop] = text;
        this.form = { ...copyform };
        // this.form["str" + prop] = text;
      }
    },
    onClose() {
      this.thisdialog.close();
    },
    clearItem() {
      this.page.cols = [];
    },
    onSave() {
      //await AssetA1.Save();
      this.$refs.form.elform.validate(async valid => {
        if (valid) {
          //Promise.all()和Promise.race()，Promise.allSettled()
          this.page.loading = true;
          await Promise.allSettled(
            this.data.map(({ ASSET_A1_AUTOID }) => {
              const form = Object.assign(
                {},
                { ...this.form },
                { ASSET_A1_AUTOID }
              );
              return AssetA1.Save(form);
            })
          );
          this.$message("保存成功"); //提示
          this.AssetA1.getData(); //刷新数据
          this.page.loading = false; //加载
          this.onClose(); //关闭
        } else {
          this.$message.error("请重新填写"); //提示
        }
      });
    }
  },
  //组件
  components: {
    assetA1Ddl
  },
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    data() {
      let _data = [];
      _data = this.tableData;
      return _data;
    },
    rules() {
      let _rules = {};
      const trigger = "blur", //触发方式 离开
        required = true; //必填
      //requiredfields
      this.page.cols.forEach(sysassetA1 => {
        if (requiredfields.includes(sysassetA1.SYS_ASSET_A1_160)) {
          Object.assign(_rules, {
            [sysassetA1.SYS_ASSET_A1_160]: [
              {
                required,
                trigger,
                message: `请输入${sysassetA1.SYS_ASSET_A1_50}`
              }
            ]
          });
        }
      });
      return _rules;
    }
  },
  //监视
  watch: {
    "page.cols": {
      handler(val) {
        this.$nextTick(() => {
          //table布局
          this.$refs.table.doLayout();
        });
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
